<template>
    <div class="pagination">
        <el-config-provider :locale="zhCn">
            <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="pageSizes"
                :small="false" :disabled="false" background :layout="layout" :total="total" />
        </el-config-provider>
    </div>
</template>

<script lang='ts' setup>
import { reactive, ref, toRefs, watch } from 'vue';
// @ts-ignore
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'


const props = defineProps({
    currentPage: {
        type: Number,
        deafult: 1,
    },
    pageSize: {
        type: Number,
        default: 10,
    },
    total: {
        type: Number,
        default: 0
    },
    pageSizes: {
        type: Array<number>,
        default: [10, 20, 50, 100]
    },
    layout: {
        type: String,
        default: "total, sizes, prev, pager, next, jumper"
    }
})

const emit = defineEmits(['size-change', 'page-change', 'update:current-page', 'update:page-size'])
let { pageNum, pageSize } = toRefs(reactive({
    pageNum: props.currentPage,
    pageSize: props.pageSize
}))
watch(pageNum, () => {
    // console.log(pageNum.value)
    // 通知父组件，page-size ， current-page 变化了
    emit('update:current-page', pageNum.value)
})
watch(pageSize, () => {
    emit('update:page-size', pageSize.value)
})


</script>
<style lang='less' scoped>
.pagination {
    float: right;
    padding-top: 20px;
}
</style>